import React, { Component } from 'react';
import { Table, Tag, Space, Button, message } from 'antd';
import { getAdminList } from '../../api/admin';
import DeleteAdmin from './DeleteAdmin'
import AddAdmin from './AddAdmin'



export interface IAdmin {
    id: number
    name: string
    mobile: string
    email: string
}

interface IState {
    adminList: IAdmin[]
    current: number
    hideOnSinglePage: boolean
    pageSize: number
    total: number
    loading: boolean
    showshowAddAdminModal: boolean
}

class AdminList extends Component<any, IState>{

    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            adminList: [],
            current: 1,
            hideOnSinglePage: true,
            pageSize: 20,
            total: 4,
            loading: true,
            showshowAddAdminModal: false
        }
    }

    getAdminList = (page: number = 1) => {

        this.setState({
            adminList: [{
                id: 1,
                name: "张小斐",
                email: "123@456.com",
                mobile: "1245678911"
            },
            {
                id: 2,
                name: "刘海柱",
                email: "123@456.com",
                mobile: "1245678911"
            },
            {
                id: 3,
                name: "大能",
                email: "123@456.com",
                mobile: "1245678911"
            },
            {
                id: 4,
                name: "德子",
                email: "123@456.com",
                mobile: "1245678911"
            }],
            loading: false
        })
        // getAdminList(page).then(response => {
        //     const { dataList } = response.data
        //     this.setState({
        //         adminList:[{
        //             id:1,
        //             name:"张小斐",
        //             email:"123@456.com",
        //             mobile:"1245678911"
        //         }]
        //     })
        // })
    }

    deleteAdmin = (id: number) => {
        this.setState((state) => ({
            adminList: state.adminList.filter(admin => admin.id !== id)
        }))
    }

    componentDidMount() {
        this.getAdminList()
    }

    showAddAdminModal = () => {
        this.setState({
            showshowAddAdminModal: true
        })
    }

    hideAddAdminModal = (refresh?: boolean, admin?: IAdmin) => {
        if (refresh) {
            message.success('已刷新数据')
        }
        const { adminList } = this.state;
        // if (admin) {
        //     this.setState({
        //         showshowAddAdminModal: false,
        //         adminList: [...adminList, admin]
        //     })
        // }
        if (admin) {
            console.log('====================================');
            console.log(this.state.adminList[this.state.adminList.length - 1].id);
            console.log('====================================');
            admin.id = this.state.adminList[this.state.adminList.length - 1].id + 1

            
            this.setState((state) => ({
                showshowAddAdminModal: false,
                adminList: [...this.state.adminList, admin]
            }))
        }
        this.setState({showshowAddAdminModal: false})
    }




    render() {
        return (
            <>
                <Button type="primary" onClick={this.showAddAdminModal} >添加管理员</Button>
                <AddAdmin visible={this.state.showshowAddAdminModal} callback={this.hideAddAdminModal} />
                <Table
                    loading={this.state.loading}
                    dataSource={this.state.adminList}
                    rowKey={'id'}
                    pagination={{ position: ['bottomCenter'], total: this.state.total, pageSize: this.state.pageSize }}
                >
                    <Table.Column title={'ID'} dataIndex={'id'} />
                    <Table.Column title={'姓名'} dataIndex={'name'} />
                    <Table.Column title={'邮箱'} dataIndex={'email'} />
                    <Table.Column title={'电话'} dataIndex={'mobile'} />
                    <Table.Column title={'操作'} render={(e: IAdmin) => (
                        <Space>
                            <Button type="primary">编辑</Button>
                            <DeleteAdmin id={e.id} deleteAdmin={this.deleteAdmin} />
                        </Space>
                    )} />
                </Table>
            </>
        );
    }
}

export default AdminList;